<template>
    <div>
      <div v-for="item in currentMenus" :key="item.path">
        <!-- 如果有children 那么我们一定使用 submenu 渲染 -->
        <el-submenu :index="item.path" v-if="item.children">
          <!-- 
            这里面显示的是父级菜单的标题
            那么，父级菜单，对我们来说永远是最外层，
            div循环的值
           -->
          <template slot="title">
            <div>{{ item.title }}</div>
          </template>
          <qf-sub-menu :currentMenus="item.children"></qf-sub-menu>
        </el-submenu>
        <!-- 如果只是一层 那么直接menu-item渲染 -->
        <el-menu-item :index="item.path" v-if="!item.children">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </div>
    </div>
  </template>
  <script>
  export default {
    // 定义一个name
    name: "qf-sub-menu",
    props: ["currentMenus"],
  };
  </script>
  